<template>
  <!-- :disabled="list.length == 0" -->
  <el-dropdown  class="right-menu-item" >
    <!-- <router-link to="/message/list"> -->
        <div class="el-dropdown-target">
            <el-badge v-if="list.length>0" :value="list.length" >
               <img src="@/assets/images/message.png" alt="" class="message">
            </el-badge>
            <img v-else src="@/assets/images/message.png" alt="" class="message">
        </div>
    <!-- </router-link> -->
    <el-dropdown-menu style="width:400px" slot="dropdown">
      <div class="message-dropdown">
        <div class="message-head">
          <span style="font-size:18px;font-weight:600">待阅消息</span>
          <span class="read" @click="handleAllsign">全部标记为已读</span>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin:0 10px">
          <el-tab-pane label="未读通知" name="0">
            <template v-if="list.length>0"> 
              <div class="content_item">
                <!-- @click="readNotice(i.noticeId)" -->
              <div class="message-item" v-for="(i,index) in list" :key="index"  >
                <div class="message-content">
                  <div class="message-title flex">
                    <div class="message-title-label">{{i.messageType}}</div>
                    <div class="craete_time">{{i.createTime}}</div>
                    <div class="sign" @click="handleSign(i)">标记为已读</div>
                  </div>
                  <div class="msg-content">{{i.content}}</div>
                </div>
              </div>
            </div>
            </template>
              <div v-else class="message-item" style="text-agline:center">
                暂无消息.......
              </div>
          </el-tab-pane>
          <el-tab-pane label="已读通知" name="1">
            <template v-if="listRead.length>0"> 
              <div class="content_item">
                <!-- @click="readNotice(i.noticeId)"  -->
              <div class="message-item" v-for="(i,index) in listRead" :key="index" >
                <div class="message-content">
                  <div class="message-title flex">
                    <div class="message-title-label">{{i.messageType}}</div>
                    <div >{{i.createTime}}</div>
                    <!-- <div class="sign">标记为已读</div> -->
                  </div>
                  <div class="msg-content">{{i.content}}</div>
                </div>
              </div>
            </div>
            </template>
              <div v-else class="message-item" style="text-agline:center">
                暂无消息.......
              </div>
          </el-tab-pane>
        </el-tabs>
       
        <div>
          <router-link to="/message/list">
            <el-dropdown-item>查看全部</el-dropdown-item>
          </router-link>
        </div>
        <div>
        </div>
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
import { getNoticeList, readNotice,readNews,setRead } from "@/api/system/message";
import { Message, MessageBox, Notification, Loading } from 'element-ui'

export default {
  name: "messageCard",
  data() {
    return {
      list:[],
      listRead:[],
      activeName:'0'

    }
  },
  mounted() {
    this.getNoReadList()
  },
  methods:{
    handleClick(val){
      console.log(this.activeName);
      this.getNoReadList(this.activeName)
    },
    getNoReadList(val='0'){
      // readNews({isRead:val}).then(res=>{
      //   console.log(res,'res000');
      //   if(res.code == 200 && res.rows){
      //     if(val=='0'){
      //     this.list = res.rows}
      //     else {
      //       this.listRead = res.rows
      //     }
      //   }
      // })
    },
    handleSign(val){
      console.log(val.id);
      setRead(val.id).then(res=>{
        console.log(res,'ppppp');
        if(res.code ==200){
          this.getNoReadList(this.activeName)
        }
      })
    },
    // 全部标记为已读
    handleAllsign(){
      // this.getNoReadList()
      setTimeout(()=>{
        console.log(this.list,'qqqqqqq');
        let arr = []
        this.list.forEach(i=>{
          arr.push(i.id)
        })
        console.log(arr,'yyyyyyyyy');
        let ids = arr.join(',')
        console.log(ids);
        if(ids){
          setRead(ids).then(res=>{
            if(res.code==200){
              this.getNoReadList(this.activeName)
            }
          })
        }
      },300)
    }
    // readNotice(noticeId){
    //   readNotice(noticeId).then(res=>{
    //     if(res.code == 200){
    //       Message.info(res.data.noticeContent)
    //       this.getNoReadList()
    //     }
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__item {
  // font-size: 12px !important;
}
.content_item {
  max-height: 300px;
  overflow: scroll;
}
.message-item:hover {
  color: #0B7BE3;
  .craete_time {
    display: none;
  }
  .sign {
    display: block;
    color: #333;
  }
  .sign:hover {
    color: #0B7BE3;
  }
}

.sign {
  display: none;
}
.read {
  float:right;
  cursor: pointer;
}
.read:hover {
  color: #0B7BE3;
}
.el-dropdown{
  padding:0!important;
}
 .el-dropdown:hover{
  background-color: #{'var(--current-dark)'};
}
.el-dropdown-target{
  padding: 0 8px;
  cursor: pointer;
}
.message{
  width:15px;
  height:15px;
}
::v-deep .el-badge__content.is-fixed{
  top:10px;
  border:0;
}
.flex{
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-item{
  border-bottom:1px solid #eee;
  padding:10px;
}
.message-item:hover{
  cursor: pointer;
}
.message-head{
  padding:0 10px;
  font-size: 14px;
  border-bottom:1px solid #eee;
  line-height: 36px;
}
.message-content{
}
.message-dropdown{
  font-size: 12px;
  color:#666;
}
.message-avatar span{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
  color:white;
}
.message-title{
  justify-content: space-between!important;
}
.message-title-label{
  color:#333;
  font-weight: 700;
  font-size: 14px;
}
.msg-content{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 30px;
  &:hover{
    overflow: auto;
    white-space: normal;
    line-height: 18px;
  }
}
.el-dropdown-menu .el-dropdown-menu__item{
  font-size: 12px;
  text-align: center;
}
.el-dropdown-menu{
  padding:0;
}
</style>
